<template>
	<view class="centerContainer">
		<scroll-view scroll-y="true" enable-flex>
		
			<view class="header">
				
				<view  class="content" v-if="userInfo.nickName">
					<image class="userImg" :src="userInfo.avatarUrl" mode=""></image>
					<view class="userInfo">
						<text class="register">{{userInfo.nickName}}</text>
					</view>
				</view>
				
				<view  class="content" v-else>
					<image class="userImg" src="../../static/mylove.jpg" mode=""></image>
					<view class="userInfo">
						<text class="login" @click="toLogin">登录 /</text>
						<text class="register">注册</text>
					</view>
				</view>
				
				<view class="list">
					<view class="listItem">
						<image class="listImg" src="../../static/icon/quanbudingdan.png" mode=""></image>
						<view class="listText">全部订单</view>
					</view>
					<view class="listItem">
						<image class="listImg" src="../../static/icon/fukuan.png" mode=""></image>
						<view class="listText">待付款</view>
					</view>
					<view class="listItem">
						<image class="listImg" src="../../static/icon/shouhuo.png" mode=""></image>
						<view class="listText">待收货</view>
					</view>
					<view class="listItem">
						<image class="listImg" src="../../static/icon/pingjia.png" mode=""></image>
						<view class="listText">待评价</view>
					</view>
					<view class="listItem">
						<image class="listImg" src="../../static/icon/shouhou.png" mode=""></image>
						<view class="listText">售后</view>
					</view>
				</view>
				
			</view>
			
			<view class="main">
				<view class="mainTop">
					<view class="item">
						<view class="text">地址管理</view>
						<image class="iconImg" src="../../static/icon/jiantou.png" mode=""></image>
					</view>
				</view>
				<view class="mainCenter">
					<view class="item">
						<view class="text">常见问题</view>
						<image class="iconImg" src="../../static/icon/jiantou.png" mode=""></image>
					</view>
					
				</view>
				<view class="mainFloor">
					<view class="item">
						<view class="text">意外碎屏保修服务</view>
						<image class="iconImg" src="../../static/icon/jiantou.png" mode=""></image>
					</view>
					
				</view>
				
			</view>
			
			
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {}
			};
		},
		methods: {
			// 点击登录去往登录页
			toLogin(){
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		mounted(){
			this.userInfo = uni.getStorageSync('userInfo_key');
			// console.log(this.userInfo);
		}
	}
</script>

<style lang="stylus">
	.centerContainer
		height: 100%
		// background-color: #f4f4f4
		background-color: green
		padding: 20upx 0
		.header
			width: 90%
			height: 300upx
			border-radius: 20upx
			box-sizing: border-box
			margin: 0 auto
			background-color: white
			// border: 2upx solid red
			.content
				width: 90%
				box-sizing: border-box
				display: flex
				flex-direction: row
				padding: 20upx
				margin: 20upx auto
				// border: 2upx solid red
				.userImg
					width: 100upx
					height: 100upx
					border-radius: 50%
				.userInfo
					font-weight: bold
					margin: 30upx 10upx
			.list
				width: 100%
				display: flex
				justify-content: space-around
				border-top: 2upx solid #aaa
				box-sizing: border-box
				.listItem
					display: flex
					flex-direction: column
					align-items: center
					padding: 20upx
					box-sizing: border-box
					.listImg
						width: 40upx
						height: 40upx
						margin: 10upx 0
					.listText
						font-size: 26upx
		.main
			height: calc(100vh - 320upx)
			width: 100%
			.mainTop
				.item
					display: flex
					justify-content: space-around
					width: 90%
					height: 300upx
					border-radius: 20upx
					box-sizing: border-box
					margin: 20upx auto
					padding: 50upx
					background-color: white
					.text
						font-size: 28upx
						flex: 1
					.iconImg
						width: 20upx
						height: 20upx
			.mainCenter
				.item
					display: flex
					justify-content: space-around
					width: 90%
					height: 300upx
					border-radius: 20upx
					box-sizing: border-box
					margin: 20upx auto
					padding: 50upx
					background-color: white
					.text
						font-size: 28upx
						flex: 1
					.iconImg
						width: 20upx
						height: 20upx
			.mainFloor
				.item
					display: flex
					justify-content: space-around
					width: 90%
					height: 300upx
					border-radius: 20upx
					box-sizing: border-box
					margin: 20upx auto
					padding: 50upx
					background-color: white
					.text
						font-size: 28upx
						flex: 1
					.iconImg
						width: 20upx
						height: 20upx
</style>
